<template>
  <view class="mime-header" :style="titleTopBgStyle">
    <image
      class="mime-header-avatar"
      @tap="handleEditAvatar"
      :lazy-load="true"
      :src="ownAvatar"
    />
    <!-- 有登录的情况 -->
    <view v-if="hasAuth" class="mime-header-main">
      <view class="main">
        <view class="title-wrap" @tap="handleToggleBaby">
          <view class="main-title">
            {{ info.name }}
          </view>
          <view class="drop-down" />
        </view>
        <view style="flex:1" />
        <!-- 花瓣数 -->
        <view class="petal-wrap">
          <view class="petal-logo" />
          <!-- TODO: -->
          <text>{{ info.petal_num | formatNumber }}</text>
        </view>
        <!-- 勋章 -->
        <view class="medal-wrap">
          <image
            v-for="item in achievement"
            :key="item.id"
            class="medal"
            :src="item.img_url"
          />
        </view>
      </view>
      <view class="student-info">
        <view>{{ cityTitle }}<text />{{ info.grade_name }}</view>
        <view>{{ info.phone }}</view>
      </view>
    </view>
    <!-- 未登录的情况 -->
    <view v-else class="not-login-main">
      <view class="not-login-wrap" @tap="handleToLogin">
        <view>点此登录</view>
        <view class="icon"></view>
      </view>
    </view>
  </view>
</template>

<script>
import Taro from "@tarojs/taro";
import { editAvatar } from "@/libs/api/mine";
import { hasBackgroundBgTitleStyle } from "@/libs/util";
import { DEFAULT_AVATAR, MIME_HEAD_BG } from "../image-url";
const MAX_SHOW_MEDAL = 3;
export default {
  props: {
    info: { type: Object, required: true },
    /**是否登录 */
    hasAuth: { type: Boolean, default: false }
  },
  data() {
    return {
      middleAvatar: null,
      DEFAULT_AVATAR
    };
  },
  computed: {
    achievement() {
      return this.info?.achievement?.slice(0, MAX_SHOW_MEDAL) || [];
    },
    titleTopBgStyle() {
      return hasBackgroundBgTitleStyle(MIME_HEAD_BG, 36, 212);
    },
    cityTitle() {
      return this.info?.city?.title;
    },
    /**头像 */
    ownAvatar() {
      return this.hasAuth ? this.info?.avatar : DEFAULT_AVATAR;
    }
  },
  methods: {
    /**去登陆 */
    handleToLogin() {
      Taro.navigateTo({
        url: `/pages/not-login/index`
      });
    },
    handleToggleBaby() {
      this.$emit("toggle");
    },
    handleEditAvatar() {
      if (!this.hasAuth) return;
      this.$emit("edit-avatar");
      const avatar = this.middleAvatar?.id
        ? this.middleAvatar
        : { avatar: this.info.avatar };
      Taro.navigateTo({
        url: `/pages/mine/edit-avatar/index?info=${JSON.stringify(avatar)}`,
        success: () => {
          Taro.eventCenter.once("handleGetAvatar", data => {
            editAvatar({ avatar: data.avatar })
              .then(() => {
                this.$message("编辑成功");
                this.info.avatar = data.avatar;
                this.middleAvatar = data;
              })
              .catch(({ message }) => {
                this.$message(message);
              });
          });
        }
      });
    }
  }
};
</script>

<style lang="scss">
@import "@/assets/scss/base-img.scss";
@import "@/assets/scss/tools.scss";
.mime-header {
  width: 100%;
  height: 328px;
  padding: 152px 30px 0;
  display: flex;
  &-avatar {
    width: 108px;
    height: 108px;
    border: 2px solid #ffffff;
    border-radius: 50%;
    box-sizing: border-box;
    margin-right: 24px;
  }
  &-main {
    flex: 1;
  }
  .not-login-main {
    flex: 1;
    padding-top: 30px;
    .not-login-wrap {
      width: 188px;
      @include normal-flex(left);
      view {
        &:first-child {
          @include base-text(50px, 36px, #303133);
          margin-right: 16px;
        }
        &.icon {
          width: 28px;
          height: 28px;
          @include setBgi("~@/assets/icon/not-login-icon.png");
        }
      }
    }
  }
  .main {
    .title-wrap {
      flex: 1;
      @include normal-flex(left);
      margin-right: 36px;
    }
    @include normal-flex;
    height: 50px;
    margin-bottom: 24px;
    &-title {
      max-width: 216px;
      @include textEllipsis;
      margin-right: 16px;
      @include base-text(50px, 36px, #303133);
    }
    .drop-down {
      width: 16px;
      height: 10px;
      @include setBgi("~@/assets/icon/black-down.png");
    }
    .petal-wrap {
      @include normal-flex;
      margin-right: 26px;
      .petal-logo {
        width: 40px;
        height: 40px;
        margin-right: 4px;
        @include setBgi($petal_icon);
      }
      text {
        @include base-text(40px, 28px, #303133, 400);
      }
    }
    .medal-wrap {
      @include normal-flex;
      .medal {
        width: 40px;
        height: 40px;
        margin-right: 8px;
        border-radius: 50%;
        &:last-child {
          margin-right: 0;
        }
      }
    }
  }
  .student-info {
    display: flex;
    view {
      box-sizing: border-box;
      min-width: 172px;
      padding: 0 16px;
      height: 42px;
      background: #ecb805;
      border-radius: 20px;
      @include base-text(34px, 24px, #ffffff, 400);

      &:first-child {
        @include normal-flex;
        margin-right: 20px;
        text {
          margin: 0 8px;
          height: 6px;
          width: 6px;
          border-radius: 50%;
          background-color: #ffffff;
        }
      }
    }
  }
}
</style>
